<template>
  <div class="home">
      <div class="header">
        <div class="left">
          <!-- <div class="title">未来已来</div>
          <div class="title title1">AI时代云工坊</div>
          <div class="desc">一键内容生成/一键海量推广</div> -->
          <div class="welcome" @click="welcomeVideo">
            <div class="img"><img src="@/assets/pic/player.png" alt=""><span>WELCOME</span></div>
            <div>怀才可遇♾无限可期</div>
          </div>
          <div class="btn">
            <div><a href="#footer">关于我们</a></div>
            <div @click="goAiChange">开始创作</div>
          </div>
        </div>
        <div class="right">
          <!-- <img src="@/assets/pic/dialog.png" alt=""> -->
        </div>
      </div>

    <div class="banner">
      <div class="body">
        <div class="title">12大AI功能</div>
        <div class="divider4">
          <el-divider></el-divider>
        </div>
        <div class="itemList">
          <div class="item">
            <div class="ite">
              <div class="head">深度原创文章</div>
              <div class="content">根据要求生成新的文本内容</div>
            </div>
            <div class="ite">
              <div class="head">原创标题</div>
              <div class="content">根据原创标题进行创作</div>
            </div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="item">
            <div class="ite">
              <div class="head">同义词原创</div>
              <div class="content">根据要求生成新的文本内容</div>
            </div>
            <div class="ite">
              <div class="head">深度改写文章</div>
              <div class="content">根据要求改写文本内容</div>
            </div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="item">
            <div class="ite">
              <div class="head">文本内容改写</div>
              <div class="content">根据要求改写内容</div>
            </div>
            <div class="ite">
              <div class="head">根据文本内容生成相应图片</div>
              <div class="content">自动完成配图排版</div>
            </div>
          </div>
        </div>
        <div class="divider2">
          <el-divider></el-divider>
        </div>
        <div class="itemList">
          <div class="item">
            <div class="ite">
              <div class="head">智能提取文本内容标签</div>
              <div class="content">提取文本内容标签</div>
            </div>
            <div class="ite">
              <div class="head">智能提取文本内容摘要</div>
              <div class="content">提取文本内容在摘要</div>
            </div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="item">
            <div class="ite">
              <div class="head">敏感词过滤</div>
              <div class="content">过滤文本内容敏感词</div>
            </div>
            <div class="ite">
              <div class="head">文本内容鉴黄过滤</div>
              <div class="content">内容鉴黄</div>
            </div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="item">
            <div class="ite">
              <div class="head">内容相似度检测</div>
              <div class="content">检测两篇文本内容相似度</div>
            </div>
            <div class="ite">
              <div class="head">文本内容通顺度过滤</div>
              <div class="content">修改文章通顺</div>
            </div>
          </div>
        </div>
        <div class="divider4">
          <el-divider></el-divider>
        </div>
      </div>

    </div>
    <div class="footer" id="footer">
      <div class="banner">
        <div class="left">
          <div class="desc">业务咨询：yanhehao.cn</div>
          <div class="desc">电话：13005166218</div>
          <div class="desc">地址：四川省成都市金牛区数媒大厦1203</div>
        </div>
        <div class="middle">
          <div class="img"><img src="../../assets/pic/qrcode1.jpg" alt=""></div>
          <div class="img"><img src="../../assets/pic/qrcode2.jpg" alt=""></div>
          <!-- <div class="img"><img src="../../assets/pic/qrcode3.png" alt=""></div> -->
        </div>
        <div class="right">
          <div class="desc">成都市彦禾豪网络科技有限公司版权所有</div>
          <div class="desc">© 2024 . All rights reserved.</div>
          <div class="desc">
            <el-button type="text"><span class="dark">隐私政策</span></el-button>
            <el-button type="text"><span class="dark">使用条款</span></el-button>
            <el-button type="text"><span class="dark">销售政策</span></el-button>
            <el-button type="text"><span class="dark">法律信息</span></el-button>
            <el-button type="text"><span class="dark">网站地图</span></el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" lock-scroll destroy-on-close :close-on-click-modal="false" title="视频播放" width="60%">
      <!-- <video ref="videoElement" :src="videoUrl"></video>   -->
      <iframe :src="videoUrl" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'Home',
  data () {
    return {
      dialogVisible: false,
      videoUrl: 'https://vvvfile.oss-cn-chengdu.aliyuncs.com/hcky.mp4'
    }
  },
  watch: {

  },
  mounted () {
  },
  methods: {
    welcomeVideo() {
      this.dialogVisible = true; // 显示 Dialog
      // window.open('https://jwz-1256500462.cos.ap-guangzhou.myqcloud.com/hcky.mp4')
    },
    goAiChange() {
      this.$router.push('/aiChange')
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  background-color: #000;
  color: #fff;
  iframe {
    width: 100%;
    height: 600px;
  }
  video {
    width: 100%;
    height: 600px;
  }
}
.header {
    width: 100%;
    position: relative;
    height: 1080px;
    background: url('../../assets/pic/banner.png') no-repeat;
    background-size: 100% 100%;
    .left {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      z-index: 9;
      .title {
        font-weight: 600;
        font-size: 80px;
      }
      .title1 {
        font-size: 50px;
        margin-top: 15px;
      }
      .desc {
        font-size: 36px;
        font-weight: 200;
        margin-top: 40px;
      }
      .welcome {
        color: #fff;
        display: flex;
        align-items: center;
        font-size: 20px;
        margin-top: 180px;
        margin-left: 170px;
        cursor: pointer;
        .img {
          display: flex;
          align-items: center;
          span {
            margin-left: 8px;
            margin-right: 20px;
          }
        }
        img {
          width: 40px;
          height: 40px;
        }
      }
      .btn {
        position: absolute;
        left: 170px;
        top: 270px;
        width: 550px;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        display: flex;
        justify-content: space-between;
        div {
          width: 200px;
          height: 56px;
          line-height: 56px;
          text-align: center;
          border-radius: 8px;
          cursor: pointer;
        }
        div:first-child {
          background: linear-gradient(to right, rgb(187, 98, 255), rgb(187, 255, 255));
        }
        div:last-child {
          color: rgb(187, 98, 255);
          border: 2px solid rgb(187, 98, 255);
          background-color: rgba(187, 98, 255, 0);
        }
      }
    }
    .right {
      width: 100%;
      position: absolute;
      top: 240px;
      left: 800px;
      z-index: 1;
      width: 876px;
      height: 585px;
      border-radius: 20px;
      background-color: rgba(255,255,255,0);
      position: relative;
      img {
        width: 100%;
        position: absolute;
        top: -13px;
        right: -15px;
        z-index: 1;
        width: 876px;
        height: 585px;
        border-radius: 20px;
      }
    }
  }
.banner {
  width: 1400px;
  height: 100%;
  margin: 0 auto;

  .body {
    margin-top: 80px;
    position: relative;
    z-index: 9;
    padding-bottom: 150px;
    .title {
      font-size: 50px;
    }
    .itemList {
      display: flex;
      justify-content: space-between;
      .el-divider--vertical {
        background: #86868b;
        height: auto;
      }
      .item {
        width: 28%;
        height: 260px;
        .ite {
          margin-top: 40px;
          .head {
            font-size: 28px;
            font-weight: 500;
          }
          .content {
            font-size: 24px;
            color: #86868c;
            margin-top: 15px;
          }
        }
      }
    }
    .divider4 .el-divider--horizontal {
      height: 4px;
      background: #fff;
    }
    .divider2 .el-divider--horizontal {
      height: 2px;
      background: #fff;
    }
  }
}

.footer {
  background-color: #fff;
  color: #000;
  height: 200px;
  .banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .left {
    .desc {
      line-height: 2;
    }
  }
  .middle {
    width: 40%;
    display: flex;
    justify-content: space-around;
    .img {
      width: 115px;
      height: 115px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .right {
    .desc {
      line-height: 2;
    }
    .dark {
      color: #000;
    }
  }
}
</style>
